<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书管理系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/bootstrapValidator.min.js"></script>
    <script>
        $(function(){
            // 客户端表单校验，使用bootstrapValidator插件
            $('#frmLogin').bootstrapValidator({
                feedbackIcons:{
                    valid:'glyphicon glyphicon-ok',
                    invalid:'glyphicon glyphicon-remove',
                    validating:'glyphicon glyphicon-refresh'
                },
                fields:{
                    username:{
                        validators:{
                            notEmpty:{
                                message:'用户名不能为空'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            }
                        }
                    }
                }
            });

            // 注册按钮点击事件 - 跳转到注册页面
            $('#btnRegister').click(function(e) {
                e.preventDefault();
                window.location.href = '/register';
            });

            // 添加表单元素动画效果
            $('.form-control').focus(function() {
                $(this).closest('.form-group').addClass('focused');
            }).blur(function() {
                $(this).closest('.form-group').removeClass('focused');
            });
        });
    </script>

    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #D1C4E9 0%, #9575CD 100%);
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            margin: 0;
            overflow-x: hidden;
        }

        /* 背景装饰元素 */
        .bg-pattern {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
            background-size: 30px 30px;
            z-index: 0;
        }

        /* 主容器 - 垂直居中 */
        .main-container {
            position: relative;
            z-index: 1;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* 登录卡片 */
        .login-card {
            background: rgba(255, 255, 255, 0.98);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(149, 117, 205, 0.25);
            max-width: 420px;
            width: 100%;
            padding: 30px 40px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .login-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 45px rgba(149, 117, 205, 0.3);
        }

        /* 卡片头部 */
        .card-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .card-header h3 {
            color: #673AB7;
            font-weight: 600;
            font-size: 28px;
            margin-bottom: 8px;
        }

        .card-header span {
            color: #777;
            font-size: 15px;
        }

        /* 表单样式 */
        .form-group {
            position: relative;
            margin-bottom: 25px;
            transition: all 0.3s ease;
        }

        .form-group.focused label {
            color: #9575CD;
            transform: translateY(-25px) scale(0.9);
        }

        .form-group label {
            position: absolute;
            top: 10px;
            left: 45px;
            color: #999;
            font-weight: 400;
            pointer-events: none;
            transition: all 0.2s ease;
        }

        .form-control {
            height: 50px;
            border-radius: 8px;
            border: 1px solid #ddd;
            padding: 15px 15px 15px 45px;
            font-size: 15px;
            box-shadow: none;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .form-control:focus {
            border-color: #9575CD;
            box-shadow: 0 0 0 2px rgba(149, 117, 205, 0.15);
        }

        .input-group-addon {
            background-color: transparent;
            border: none;
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 10;
            color: #999;
            transition: color 0.3s ease;
        }

        .form-control:focus + .input-group-addon {
            color: #9575CD;
        }

        /* 下拉框样式 */
        select.form-control {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.41 0L6 4.58 10.59 0 12 1.41 6 7.41 0 1.41z' fill='%23999'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 12px;
        }

        /* 错误消息样式 */
        .form-group p {
            margin-top: 5px;
            margin-bottom: 0;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        /* 按钮样式 */
        .btn-container {
            display: flex;
            gap: 15px;
            margin-top: 35px;
        }

        .btn {
            padding: 12px 16px;
            font-size: 16px;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(149, 117, 205, 0.15);
        }

        .btn-primary {
            background: linear-gradient(135deg, #9575CD 0%, #7E57C2 100%);
            border: none;
        }

        .btn-primary:hover,
        .btn-primary:focus {
            background: linear-gradient(135deg, #7E57C2 0%, #9575CD 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(149, 117, 205, 0.3);
        }

        .btn-success {
            background: linear-gradient(135deg, #81C784 0%, #66BB6A 100%);
            border: none;
        }

        .btn-success:hover,
        .btn-success:focus {
            background: linear-gradient(135deg, #66BB6A 0%, #81C784 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(129, 199, 132, 0.3);
        }

        /* 页脚 - 固定在底部 */
        .footer {
            position: relative;
            z-index: 1;
            width: 100%;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            padding: 15px 0;
            font-size: 14px;
            background: rgba(149, 117, 205, 0.15);
            backdrop-filter: blur(5px);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .login-card {
                padding: 25px 30px;
            }

            .card-header h3 {
                font-size: 24px;
            }

            .btn-container {
                flex-direction: column;
                gap: 10px;
            }
        }

        /* 输入框动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .form-group {
            animation: fadeIn 0.4s ease forwards;
            opacity: 0;
        }

        .form-group:nth-child(1) { animation-delay: 0.1s; }
        .form-group:nth-child(2) { animation-delay: 0.2s; }
        .form-group:nth-child(3) { animation-delay: 0.3s; }
        .form-group:nth-child(4) { animation-delay: 0.4s; }
    </style>
</head>
<body>
<!-- 背景装饰 -->
<div class="bg-pattern"></div>

<!-- 主容器 - 垂直居中 -->
<div class="main-container">
    <div class="login-card">
        <!-- 卡片头部 -->
        <div class="card-header">
            <h3>图书管理系统</h3>
            <span>Library Management System</span>
        </div>

        <!-- 登录表单 -->
        <form action="/login" class="form-horizontal" method="post" id="frmLogin">
            <div class="form-group">
                <p th:text="${msg}" style="color: #e74c3c;margin: 0 0 15px 0;text-align: center"></p>
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input class="form-control" type="text" placeholder=" " name="username">
                    <label>用户名</label>
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                    <input class="form-control" type="password" placeholder=" " name="password">
                    <label>密码</label>
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-id-card"></i></span>
                    <select class="form-control" name="type">
                        <option value="0">-请选择身份-</option>
                        <option value="1">普通用户</option>
                        <option value="2">管理员</option>
                        <option value="3">系统管理员</option>
                    </select>
                    <label>身份</label>
                </div>
            </div>

            <div class="form-group">
                <div class="btn-container">
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fa fa-sign-in"></i> 登录
                    </button>
                    <button type="button" id="btnRegister" class="btn btn-success btn-block">
                        <i class="fa fa-user-plus"></i> 注册
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 页脚 - 固定在底部 -->
<div class="footer">
    <p class="text-muted credit">
        © 2025 图书管理系统 | 版权所有
    </p>
</div>
</body>
</html>